<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 同步脚本，按照书写顺序加载执行，会阻止页面渲染 -->
<!-- <script src="./xixi.js"></script>
<script src="./hehe.js"></script>
<script src="./haha.js"></script> -->

<!-- 异步脚本，脚本为异步加载，不会阻止页面渲染 -->

<!-- 设置了type="module"时，脚本为异步加载，等到DOM加载完成时执行 -->
<!-- <script type="module" src="./xixi.js"></script> -->

<!-- 设置了defer时，脚本为异步加载，等到DOM加载完成时执行 -->
<!-- <script src="./hehe.js" defer></script> -->

<!-- 设置了async时，脚本为异步加载，脚本加载完成时立即执行 -->
<!-- <script src="./haha.js" async></script> -->

<!-- 
    defer 和 async 的区别？
    defer脚本加载完成后，需要等到DOM加载完成才会执行
    async脚本加载完成后，立即执行，中断页面渲染，脚本执行完成后继续渲染页面
    有多个defer脚本时，按顺序执行
    有多个async脚本时，不能保证执行顺序
    简单讲，defer是DOM加载完成时执行，async是脚本加载完成立即执行
 -->

<!-- 有多个defer脚本时，按顺序执行 -->
<!-- <script src="./hehe.js" defer></script> -->
<!-- <script src="./haha.js" defer></script> -->

<!-- 有多个async脚本时，不能保证执行顺序 -->
<script src="./hehe.js" async></script>
<script src="./haha.js" async></script>

</head>
<body>
    
<button class="btn1">按钮1</button>
<button class="btn2">按钮2</button>
<button class="btn3">按钮3</button>

</body>
</html>